<style>
    .panel {
        color: #333;
        padding: 6px;
        border: 1px solid silver;
        box-shadow: 3px 4px 3px 0px silver;
        position: absolute;
        background-color: #eee;
        top: 10px;
        right: 10px;
        border-radius: 5px;
        overflow: hidden;
        line-height: 20px;
    }

    .panel .address {
        width: 250px;
        height: 25px;
    }
</style>
<section class="content">
    <div class="row addsullier">
        <div class="col-md-12">
            <div class="box box-danger">
                <div class="box-body ">
                    <div id="container2" style="width: 100%;height: 400px;"></div>
                    <div style="clear: both;"></div>
                    <div id="status">
                        <div style="color: red;margin-top: 5px;">选择车辆:<span id="icarname"></span>&nbsp;&nbsp;<span id="icarno"></span></div>
                        <input type="hidden" id="mcarid"/>
                        <input type="hidden" id="mcarname"/>
                        <input type="hidden" id="mcarno"/>
                    </div>
                    <div class="box-footer">
                           <span class="input-group-btn">
                                <button class="btn btn-primary pull-right" type="button" id='form_submit2'>提交</button>
                            </span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        var icon, marker, geocoder, infoWindow;
        var lng = '{$lng}', lat = '{$lat}';
        $(function () {
            setTimeout(function () {
                var centerPoint =  new BMap.Point(112.97935279, 28.21447823);  // 创建点坐标
                map = new BMap.Map("container2");
                if ((lng != "0" || lat != "0")&&lng!=''&&lat!="") {
                    centerPoint = new BMap.Point(lng, lat);  // 创建点坐标
                    var myIcon = new BMap.Icon('__PUBLIC__/images/factory.png', new BMap.Size(48, 48), {
                        'imageSize': new BMap.Size(48, 48),
                        'anchor': new BMap.Size(17, 34)
                    });
                    marker = new BMap.Marker(centerPoint, {icon: myIcon});// 创建标注
                    map.addOverlay(marker);             // 将标注添加到地图中
                    marker.enableDragging();
                }
                infoWindow = new BMap.InfoWindow("", {
                    offset: new BMap.Size(0, -34)
                });  // 创建信息窗口对象
                infoWindow.disableCloseOnClick();

                map.enableScrollWheelZoom();
                map.centerAndZoom(centerPoint, 12);
                //标记所有在线车辆
                //查询在线车辆
                $.post("{:U('Car/getOnline')}",null, function (res) {
                    if (res.status!=0) {
                        $.messager.alert('提示信息', res.info, 'error');
                    } else {
                        if(res.total==0){
                            $.messager.alert('提示信息', "当前没有车辆在线", 'error');
                        }else{
                            //标记车辆位置
                            var myIcon = new BMap.Icon('__PUBLIC__/images/car.png', new BMap.Size(36, 36), {
                                'imageSize': new BMap.Size(36, 36)
                            });
                            var carlist = res.carlist;
                            for(var i=0;i<carlist.length;i++){
                                var car = carlist[i];
                                var point =  new BMap.Point(car.longitude, car.latitude);  // 创建点坐标
                                marker = new BMap.Marker(point, {icon: myIcon});// 创建标注
                                marker.addEventListener("click", function () {
                                    var pt = marker.getPosition();
                                    openInfo('<div style="color: #00a7d0;font-weight: bold;">选择车辆</div>车牌:' + car.carno +  "<br/>名称:" + car.name, pt);
                                    $("#icarname").html(car.name);
                                    $("#icarno").html(car.carno);
                                    $("#mcarid").val(car.id);
                                    $("#mcarname").val(car.name);
                                    $("#mcarno").val(car.carno);
                                });
                                map.addOverlay(marker);
                            }
                        }
                    }
                });
            }, 200);
        });



        $('#form_submit2').click(function () {
            if($("#mcarid").val()==""){
                $.messager.alert('提示信息', "请选择车辆", 'error');
                return;
            }
            $("#car_id").val($("#mcarid").val());
            $("#def_carname").val($("#mcarname").val()+"    车牌:"+$("#mcarno").val());
            dialog.get('onlinecar').close().remove();
        });

        //构建信息窗体中显示的内容
        function openInfo(msg, point) {
            //构建信息窗体中显示的内容
            infoWindow.setContent(msg);  // 创建信息窗口对象
            var centerPoint = new BMap.Point(point.lng, point.lat);  // 创建点坐标
            map.openInfoWindow(infoWindow, centerPoint); //开启信息窗口
        }
    </script>
</section>

